<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue 代办事项列表</title>
    <!-- 引入 Vue CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <style>
        .container {
            max-width: 500px;
            margin: 2rem auto;
            padding: 0 1rem;
            font-family: sans-serif;
        }
        h1 {
            text-align: center;
            color: #333;
            margin-bottom: 1.5rem;
        }
        /* 添加待办区域 */
        .add-bar {
            display: flex;
            gap: 0.5rem;
            margin-bottom: 1rem;
        }
        .todo-input {
            flex: 1;
            padding: 0.6rem;
            border: 1px solid #ddd;
            border-radius: 4px;
        }
        .btn {
            padding: 0.6rem 1rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            color: white;
        }
        .btn-add {
            background-color: #42b983;
        }
        .btn-del-batch {
            background-color: #f56c6c;
            margin-bottom: 1rem;
            display: none; /* 默认隐藏，通过 v-show 控制 */
        }
        .btn-edit {
            background-color: #409eff;
            margin-right: 0.3rem;
            padding: 0.3rem 0.6rem;
            font-size: 0.8rem;
        }
        /* 待办列表 */
        .todo-list {
            list-style: none;
            padding: 0;
        }
        .todo-item {
            display: flex;
            align-items: center;
            gap: 0.8rem;
            padding: 0.8rem;
            margin-bottom: 0.5rem;
            border: 1px solid #eee;
        }
        .todo-check {
            width: 16px;
            height: 16px;
        }
        .todo-content {
            flex: 1;
            cursor: pointer;
        }
        .done {
            text-decoration: line-through;
            color: #999;
        }
        /* 状态标签 */
        .status-tag {
            padding: 0.2rem 0.5rem;
            border-radius: 12px;
            font-size: 0.7rem;
            color: white;
        }
        .status-done {
            background-color: #42b983;
        }
        .status-pending {
            background-color: #fbbf24;
        }
        /* 提示与统计 */
        .tip {
            color: #f56c6c;
            font-size: 0.8rem;
            margin: 0.3rem 0;
        }
        .stats {
            margin-top: 1rem;
            color: #666;
            font-size: 0.9rem;
        }
        /* 编辑框样式（通过 v-if 控制显示） */
        .edit-input {
            flex: 1;
            padding: 0.4rem;
            border: 1px solid #409eff;
            border-radius: 4px;
        }
    </style>
</head>
<body>
<div class="container" id="app">
    <h1>Vue待办列表</h1>

    <!-- 添加待办区域 -->
    <div class="add-bar">
        <input
                type="text"
                class="todo-input"
                placeholder="输入待办内容"
                v-model="newTodoText"
                @keyup.enter="addTodo"
        >
        <button class="btn btn-add" @click="addTodo">添加</button>
    </div>
    <div class="tip" v-text="addTip"></div>

    <!-- 批量删除按钮（有选中项时显示） -->
    <button
            class="btn btn-del-batch"
            @click="deleteBatch"
            v-show="selectedIds.length > 0"
    >
        批量删除（已选：{{ selectedIds.length }}）
    </button>

    <!-- 待办列表（v-for 动态渲染） -->
    <ul class="todo-list">
        <li class="todo-item" v-for="(todo, index) in todos" :key="todo.id">
            <!-- 批量选择复选框 -->
            <input
                    type="checkbox"
                    class="todo-check"
                    v-model="selectedIds"
                    :value="todo.id"
            >

            <!-- 待办文本/编辑框（v-if/v-else 切换） -->
            <span
                    class="todo-content"
                    :class="{ done: todo.isDone }"
                    v-if="!todo.isEditing"
                    @click="toggleDone(index)"
            >
                    {{ todo.text }}
                </span>
            <input
                    type="text"
                    class="edit-input"
                    v-else
                    v-model="todo.editText"
                    @blur="finishEdit(index)"
                    @keyup.enter="finishEdit(index)"
            >

            <!-- 状态标签（v-html 渲染加粗文本，v-bind:class 动态颜色） -->
            <span
                    class="status-tag"
                    :class="todo.isDone ? 'status-done' : 'status-pending'"
                    v-html="todo.isDone ? '<b>已完成</b>' : '<b>未完成</b>'"
            ></span>

            <!-- 编辑按钮 -->
            <button
                    class="btn btn-edit"
                    @click="startEdit(index)"
                    :disabled="todo.isEditing"
            >
                编辑
            </button>
        </li>
    </ul>

    <!-- 统计信息（computed 实时计算） -->
    <div class="stats">
        总数量：{{ todos.length }} | 已完成：{{ doneCount }} | 未完成：{{ pendingCount }}
    </div>
</div>

<!-- Vue 实例初始化 -->
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                newTodoText: '', // 新增待办输入内容
                addTip: '', // 提示文本
                selectedIds: [], // 批量选中的待办ID
                // 初始待办数据
                todos: [
                    { id: 1, text: '学习v-model', isDone: false, isEditing: false, editText: '' },
                    { id: 2, text: '练习v-for', isDone: true, isEditing: false, editText: '' },
                    { id: 3, text: '掌握v-bind', isDone: false, isEditing: false, editText: '' }
                ]
            };
        },
        computed: {
            // 已完成数量统计
            doneCount() {
                return this.todos.filter(todo => todo.isDone).length;
            },
            // 未完成数量统计
            pendingCount() {
                return this.todos.filter(todo => !todo.isDone).length;
            }
        },
        methods: {
            // 添加待办
            addTodo() {
                const text = this.newTodoText.trim();
                if (!text) {
                    this.addTip = '请输入待办内容！';
                    return;
                }
                // 新增待办（时间戳作为唯一ID）
                this.todos.push({
                    id: Date.now(),
                    text,
                    isDone: false,
                    isEditing: false,
                    editText: text
                });
                // 重置状态
                this.newTodoText = '';
                this.addTip = '';
            },
            // 切换完成状态
            toggleDone(index) {
                this.todos[index].isDone = !this.todos[index].isDone;
            },
            // 批量删除
            deleteBatch() {
                if (confirm(`确定删除选中的${this.selectedIds.length}项待办？`)) {
                    this.todos = this.todos.filter(todo => !this.selectedIds.includes(todo.id));
                    this.selectedIds = []; // 清空选中数组
                }
            },
            // 开始编辑
            startEdit(index) {
                const todo = this.todos[index];
                todo.isEditing = true;
                todo.editText = todo.text; // 编辑框初始值为原文本
                // 延迟聚焦编辑框（确保DOM已更新）
                setTimeout(() => {
                    document.querySelectorAll('.edit-input')[index].focus();
                }, 0);
            },
            // 完成编辑
            finishEdit(index) {
                const todo = this.todos[index];
                const editText = todo.editText.trim();
                // 非空则更新文本，否则保持原文本
                if (editText) todo.text = editText;
                todo.isEditing = false; // 退出编辑状态
            }
        }
    });
</script>
</body>
</html>